<template>
  <div class="systemPage-wrapper">
    <div class="topbar">
      <span
        class="iconfont iconyewu_wuziguanli_wuzibianmaguanli titleIcon"
      ></span>
      <span>物资类别维护</span>
    </div>
    <div class="content-background">
      <div class="left-tree content-wrapper">
        <span class="title">物资类别选择</span>
        <data-tree
          ref="menuTree"
          :type="3"
          :dropMenuShow="1"
          :dropMenuList="dropMenu"
          :param="param"
          @getNodeInfo="getMenuInfo"
          @menuOperations="menuOperations"
          :checkBox="0"
        ></data-tree>
      </div>
      <div class="right-board content-wrapper" v-if="formVisible">
        <div class="detail-header">
          <div class="header-left">
            <i></i>
            <span>物资类别管理</span>
          </div>
          <div class="header-right">
            <div class="buttons-wrapper" v-if="!editable">
              <span @click="save()" class="systemButtonConfirm">保存</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="detail-content">
          <el-form
            :class="!editable ? 'deptOnlyRead systemForm' : 'systemForm'"
            ref="dataForm"
            :model="dataForm"
            label-width="100px"
            size="mini"
          >
            <el-row>
              <el-form-item label="类别名称:">
                <el-input
                  v-model="dataForm.name"
                  :disabled="editable"
                  class="systemInput"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="类别编码:">
                  <el-input
                    v-model="dataForm.code"
                    :disabled="editable"
                    class="systemInput"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="可用状态:">
                  <el-select
                    class="systemInput"
                    v-model="dataForm.state"
                    :disabled="editable"
                  >
                    <el-option
                      v-for="item in stateMap"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="备注:">
                  <el-input
                    v-model="dataForm.note"
                    :disabled="editable"
                    class="systemInput"
                    type="textarea"
                    resize="none"
                    :rows="8"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mmPartsCodeDetail,
  mmPartsCodeSave,
  mmPartsCodeDel,
} from "../api/mmPartsCode.js";
import dataTree from "../../business/components/commonTree";
export default {
  name: "dataManage",
  components: {
    dataTree,
  },
  data() {
    return {
      stateMap: [
        {
          value: 0,
          label: "不可用",
        },
        {
          value: 1,
          label: "可用",
        },
      ],
      param: {
        pid: 0,
      },
      showRole: false,
      // 右键菜单
      dropMenu: [],
      catalogueShow: false,
      // 树 左击信息
      currentMenuNodeId: "",
      formVisible: false,
      dialogFormTitle: "",
      currentNodeInfo: {},
      dataForm: {
        id: "",
        name: "",
        code: "",
        note: "",
        state: "",
        kyfw: "",
        kyfwName: "",
      },
      editable: false,
    };
  },
  mounted() {},
  methods: {
    // 刷新树
    refreshNode() {
      this.$refs.menuTree.refreshNode(this.currentNode);
    },
    // 菜单树点击
    async getMenuInfo(e) {
      if (e.clickType) {
        this.currentNodeInfo = e;
        this.dataForm = this.currentNodeInfo;
        this.editable = true;
        this.formVisible = true;
      } else {
        this.dropMenu = e.data.pid
          ? [
              {
                index: 2,
                label: "编辑",
                icon: "icon iconfont iconbiaoge-bianji",
              },
              {
                index: 3,
                label: "删除",
                icon: "icon iconfont iconbiaoge-shanchu",
              },
            ]
          : [
              {
                index: 0,
                label: "新增大类",
                icon: "icon iconfont iconzengjia",
              },
              {
                index: 1,
                label: "新增小类",
                icon: "icon iconfont iconzengjia",
              },
              {
                index: 2,
                label: "编辑",
                icon: "icon iconfont iconbiaoge-bianji",
              },
              {
                index: 3,
                label: "删除",
                icon: "icon iconfont iconbiaoge-shanchu",
              },
            ];
        this.currentNode = e;
        const detail = await mmPartsCodeDetail({
          id: e.data.id,
        });
        this.currentNodeInfo = detail.info;
      }
    },
    // 菜单树右键菜单
    menuOperations(e) {
      // 0-新增同级 1-新增下级 2-编辑 3-删除
      this.dialogFormTitle = "";
      this.dataForm = {};
      this.operationType = e;
      switch (Number(e)) {
        case 0:
          this.dataForm = {
            state: 1,
            pid: this.currentNodeInfo.pid,
          };
          this.currentNode = this.currentNode.parent;
          this.currentNode.operationType = 1;
          this.editable = false;
          this.formVisible = true;
          break;
        case 1:
          this.currentNode.operationType = 1;
          this.editable = false;
          this.formVisible = true;
          this.dataForm = {
            state: 1,
            pid: this.currentNodeInfo.id,
          };
          break;
        case 2:
          this.currentNode.operationType = 0;
          this.dataForm = this.currentNodeInfo;
          this.editable = false;
          this.formVisible = true;
          break;
        case 3:
          this.messageBox("确认删除？").then((c) => {
            if (c.action) {
              mmPartsCodeDel({
                id: this.currentNodeInfo.id,
              }).then((res) => {
                if (res.success) {
                  this.currentNode.operationType = 0;
                  this.$refs.menuTree.refreshNode(this.currentNode);
                  this.message(res.msg, 1);
                  this.formVisible = false;
                } else {
                  this.message(res.msg, 3);
                  this.formVisible = false;
                }
              });
            }
          });
          break;
      }
    },
    // 初始化
    Initialize(id) {
      mmPartsCodeDetail({ id: id }).then((res) => {
        if (res.success) {
          this.dataForm = res.info;
        } else this.message(res.msg, 3);
      });
    },
    //保存
    save() {
      mmPartsCodeSave(this.dataForm).then((res) => {
        if (res.success) {
          let node = this.$refs.menuTree.$refs.tree.getNode(
            this.currentNodeInfo
          );
          node.operationType = 0;
          this.$refs.menuTree.refreshNode(node);
          this.message(res.msg, 1);
          this.Initialize(res.info);
          this.editable = false;
        } else {
          this.message(res.msg, 3);
        }
      });
    },
    treeCancel() {
      this.showRole = false;
    },
    selectRole() {
      if (this.editable) {
        return;
      }
      if (!this.dataForm.id) {
        this.message("请先保存后再选择可见范围！", 3);
      } else {
        this.showRole = true;
      }
    },
    getRole(nodes) {
      var arrAcceptIds = [];
      var arrAcceptNames = [];
      this.comtree = false;
      Object.keys(nodes).forEach(function (i) {
        arrAcceptIds.push(nodes[i].id);
        arrAcceptNames.push(nodes[i].name);
      });
      var acceptIds = arrAcceptIds.join(",");
      var accepts = arrAcceptNames.join(",");
      this.dataForm.kyfw = acceptIds;
      this.dataForm.kyfwName = accepts;
      this.showRole = false;
    },
  },
};
</script>

<style scoped>
.content-background {
  display: flex;
}

.dataManage-wrapper {
  overflow-y: auto;
  min-width: 1024px;
  width: 100%;
  height: calc(100% - 42px);
}

.right-board {
  flex: 1;
}

.title::before {
  content: "";
  display: block;
  width: 4px;
  height: 20px;
  line-height: 20px;
  background: #53a7ff;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}

.left-tree {
  width: 320px;
  margin-right: 12px;
  text-align: left;
  overflow: auto;
  height: 100%;
}

.title {
  margin: 16px;
  text-align: left;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  padding: 0 12px;
  position: relative;
  color: var(--organization-tabs-text-color);
}

.detail-header {
  margin: 12px 21px 12px 16px;
  height: 28px;
  line-height: 28px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header-left {
  font-size: 16px;
}

.header-left i {
  width: 4px;
  height: 20px;
  line-height: 20px;
  border-right: 4px solid rgba(83, 168, 255, 1);
  background: #53a8ff;
  border-radius: 2px;
}

.header-left span {
  margin-left: 8px;
  width: 69px;
  height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: var(--system-page-topbar-text-color);
}

.line {
  height: 0.5px;
  border: 0.5px solid rgba(197, 208, 216, 1);
  margin: 0px 20px 0px 16px;
}

.detail-content {
  display: flex;
  justify-content: center;
  flex: 1;
  height: calc(100% - 53px);
  min-width: 800px;
  overflow-x: auto;
}

.systemForm {
  display: flex;
  flex-direction: column;
  padding: 40px 142px 18px 142px;
  width: 100%;
}

.row {
  display: flex;
}

.row-left {
  flex: 1;
}

.row-right {
  width: 48px;
}

.border {
  margin-left: 8px;
  display: inline-block;
  border-radius: 4px;
  background: rgba(244, 246, 249, 0);
  border: 1px solid var(--button-border-color);
  width: 40px;
  height: 28px;
  line-height: 28px;
  margin-top: 3px;
  color: var(--input-focus-border-color);
}

.border:hover {
  background: rgba(244, 246, 249, 1);
  border: 1px solid var(--input-focus-border-color);
  cursor: pointer;
}

.border:active {
  border: 1px solid var(--input-focus-border-color);
  cursor: pointer;
}

.disable {
  margin-left: 8px;
  display: inline-block;
  border-radius: 4px;
  background: rgba(244, 246, 249, 0);
  border: 1px solid var(--button-border-color);
  width: 40px;
  height: 28px;
  line-height: 28px;
  margin-top: 3px;
  color: var(--checkBox-disable-back-color);
}
</style>
